<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="styles/common.css">
    <link rel="stylesheet" href="styles/page-account.css">
    <link rel="icon" href="favicon.ico">
</head>

<body>
    <div class="login-box">
        <!--head-->
        <div class="py-container logoArea">
            <a href="home.html" class="logo"></a>
        </div>
        <!--loginArea-->
        <div class="loginArea">
            <div class="py-container login">
                <div class="loginform">
                    <ul class="sui-nav nav-tabs tab-wraped">
                        <li><a href="#index" data-toggle="tab"  >扫描登录</a></li>
                        <li class="active"><a href="#profile" data-toggle="tab">账户登录</a></li>
                    </ul>
                    <div class="tab-content tab-wraped">
                        <div></div>
                        <div id="profile" class="tab-pane active" >

                            <form class="sui-form" >
                                <div class="input-prepend">
                                    <span class="add-on loginname"></span>
                                    <input type="text" class="span2 input-xfat" name="username" placeholder="用户名/邮箱">
                                </div>
                                <div class="input-prepend">
                                    <span class="add-on loginpwd"></span>
                                    <input type="password" class="span2 input-xfat" name="password" placeholder="请输入密码">
                                </div>
                                <div class="setting">
                                    <label class="checkbox inline"><input name="m1" type="checkbox" checked> 自动登录</label>
                                    <span class="forget">忘记密码？</span>
                                </div>
                                <div class="logined">
                                    <!-- <a class="sui-btn btn-block btn-xlarge btn-danger">登&nbsp;&nbsp;录</a> -->
                                    <input class="sui-btn btn-block btn-xlarge btn-danger" type="submit" value="登&nbsp;&nbsp;录">
                                </div>
                            </form>

                            <div class="registration">
                                <ul>
                                    <li>
                                        <a href="#"></a>
                                    </li>
                                    <li>
                                        <a href="#"></a>
                                    </li>
                                    <li>
                                        <a href="#"></a>
                                    </li>
                                    <li>
                                        <a href="#"></a>
                                    </li>
                                </ul>

                                <a href="register.html">立即注册</a>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>
        <!--foot-->
        <div class="py-container copyright">
            <ul>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
                <li><a href="#">联系客服</a></li>
                <li><a href="#">商家入驻</a></li>
                <li><a href="#">营销中心</a></li>
                <li><a href="#">手机品优购</a></li>
                <li><a href="#">销售联盟</a></li>
                <li><a href="#">品优购社区</a></li>
                <li><a href="#">品优购公益</a></li>
                <li><a href="#">English Site</a></li>
                <li><a href="#">Contact U</a></li>
            </ul>
            <div class="address">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</div>
            <div class="beian">京ICP备08001421号京公网安备110108007702
            </div>
        </div>
    </div>
</body>
<script src="./js/utils.js"></script>
<script src="./js/jquery/jquery-3.4.1.js"></script>
<script>
    // 获取form标签
    var form = document.querySelector('form');
    var username = document.querySelector('[name="username"]');
    var password = document.querySelector('[name="password"]');

    // console.log(form);
    // console.log(username);
    // console.log(password);
    // 绑定事件
    form.addEventListener('submit', submit)

    function submit() {
        // 表单验证（后面必须加上）
        // 阻止默认行为
        window.event.returnValue = false
        // 发送请求
        var xhr = new XMLHttpRequest()
        xhr.open('post', 'http://localhost:8888/users/login')
        // 表示数据在传送之前要进行编码处理。
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
        var params = `username=${username.value}&password=${password.value}`

        
        // 将数据以字符串形式放在send方法中
        xhr.send(params)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var res = xhr.responseText
                    res = JSON.parse(res)
                    // console.log(res);
                    var {
                        message,
                        code,
                        user: {
                            id: userId
                        },
                        token
                    } = res
                    // 判断登录状态
                    if (code === 1){
                        alert(message)
                        // 跳转到登录页面
                        // 用函数设置cookie
                        setCookie('username',username.value,7200)
                        setCookie('userId',userId,7200)
                        

                        // 将token存入'token'字段中
                        localStorage.setItem('token',token)

                        // 获取地址栏中的goto，如果有goto，就跳转到goto对应的页面中，如果没有goto，就默认跳转到首页

                        // 如果是本地存储
                        // 获取指定url本地存储的值
                        var url = localStorage.getItem('url')
                        if(url){
                            // 在跳转之前要将本地存储中的地址删除掉
                            localStorage.removeItem('url')
                            location.href = url
                        }else
                            location.href = 'home.html'
                    }else{
                        alert(message)
                    }
                }
            }
        }
    }

    $('.loginform li').click(function(){
        $(this).addClass('active').siblings().removeClass('active').parent().next().children().eq($(this)
        .index()).addClass('active').siblings().removeClass('active')
        console.log($(this).addClass('active').siblings().removeClass('active').parent().next().children());
    })
</script>
</html>